<template>
  <div class="x-map-root">
    <div class="x-map"></div>
    <div
      class="modal-box"
      v-show="modal.show"
      :style="modalStyle"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave">
      <div class="title-box">
        <span class="title"> {{selectedData.title}}</span>
      </div>
      <div class="content-box clearfix">
        <div class="icon-box">
          <i class="icon" :class="{offline: !selectedData.online}"></i>
          <span class="number">{{selectedDataIndex + 1}}</span>
        </div>
        <div class="content">
          <div class="part">
            <span class="key">使用者: </span>
            <span class="value">{{selectedData.userName}}</span>
          </div>
          <div class="part">
            <span class="key">当前状态: </span>
            <span class="value">{{selectedData.online ? '在线' : '离线'}}</span>
          </div>
        </div>
      </div>

      <div class="close-btn">
        <div
          class="close"
          @click="hideModal">
          <!--<i class="fa fa-times"></i>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MAP_STYLE from 'config/map-style'

export default {
  name: 'x-map',

  props: {
    data: {
      type: Array,
      default () {
        return [
          // {
          //   lng: 116.404,
          //   lat: 39.915,
          //   online: true,
          //   title: '三防设备001',
          //   userName: '工程部石锅豪'
          // },
          // {
          //   lng: 116.400,
          //   lat: 39.925,
          //   online: false,
          //   title: '三防设备002',
          //   userName: '工程部张剩志'
          // }
        ]
      }
    },
    clickNumber: {
      type: Number
    }
  },
  data () {
    return {
      map: null,
      modal: {
        show: false,
        left: -1,
        top: -1,
        width: 270,
        height: 130
      },
      selectedDataIndex: 0,
      selectMarkerIndex: -1,
      markerNodes: []
    }
  },

  computed: {
    points () {
      let result = []
      this.data.forEach((point) => {
        let obj = {
          lng: point.lng,
          lat: point.lat,
          state: point.online ? 1 : 0
        }
        result.push(obj)
      })
      return result
    },

    modalStyle () {
      let result = {
        left: this.modal.left - this.modal.width / 2 + 'px',
        top: this.modal.top - this.modal.height - 50 + 'px',
        width: this.modal.width + 'px',
        height: this.modal.height + 'px'
      }
      return result
    },

    selectedData () {
      return this.data[this.selectedDataIndex] || {}
    },

    centerPoint () {
      let lng = 113.378277
      let lat = 23.108104
      // let lngSum = 0
      // let latSum = 0
      // let length = this.data.length
      // this.data.forEach((item) => {
      //   lngSum += item.lng
      //   latSum += item.lat
      // })
      // lngSum > 0 && (lng = lngSum / length)
      // latSum > 0 && (lat = latSum / length)
      // let lng = this.data[3].lng
      // let lat = this.data[3].lat
      return [lng, lat]
    }
  },

  watch: {
    clickNumber () {
      let BMap = window.BMap
      let lng = this.data[this.clickNumber].lng
      let lat = this.data[this.clickNumber].lat
      // 过滤一下空的
      if (lng === 0 && lat === 0) {
        return
      }
      this.map.panTo(new BMap.Point(lng, lat))
      this.selectMarkerIndex = this.clickNumber
    },
    selectMarkerIndex (val) {
      this.markerNodes.forEach((item) => {
        item.style.zIndex = 10
      })
      try {
        this.markerNodes[val].style.zIndex = 100
      } catch (error) {
        console.log('index: ' + val + error)
      }
    }
  },

  mounted () {
    setTimeout(() => {
      this.initMap()
    }, 1000)
  },

  destroyed () {
    this.killMap()
  },

  // updated () {
  //   let BMap = window.BMap
  //   let map = this.map
  //   setTimeout(() => {
  //     map.panTo(new BMap.Point(113.262232, 23.154345)) // 两秒后移动到广州
  //   }, 2000)
  // },

  methods: {
    initMap () {
      let BMap = window.BMap
      let map = new BMap.Map(this.$el.getElementsByClassName('x-map')[0], {minZoom: 4, maxZoom: 20})
      this.map = map
      var point = new BMap.Point(...this.centerPoint) // 创建点坐标
      map.centerAndZoom(point, 17)
      map.setMapStyle({styleJson: MAP_STYLE})
      map.enableScrollWheelZoom(true)
      this.addMarkers()
    },

    addMarkers () {
      // let BMap = window.BMap
      // let map = this.map
      // var classes = ['map-marker']
      this.points.forEach((point, index) => {
        this.createMarker(point, index + 1, index)
      })
    },

    createMarker (marker, text, index) {
      let self = this
      const classes = {
        '1': 'online',
        '0': 'offline'
      }
      const MARKER_CLASSNAME = 'map-marker ' + classes[marker.state]
      const MARKER_TEXT_CLASSNAME = 'marker-text ' + classes[marker.state]
      let BMap = window.BMap
      let mp = this.map

      function ComplexCustomOverlay (point, text, mouseoverText) {
        this._point = point
        this._text = text
        this._overText = mouseoverText
      }
      ComplexCustomOverlay.prototype = new BMap.Overlay()
      ComplexCustomOverlay.prototype.initialize = function (map) {
        this._map = map
        var div = this._div = document.createElement('div')
        div.className = MARKER_CLASSNAME
        div.style.position = 'absolute'
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat)
        div.style.backgroundImage = marker.backgroundImage

        var span = this._span = document.createElement('span')
        span.className = MARKER_TEXT_CLASSNAME
        span.appendChild(document.createTextNode(this._text))
        div.appendChild(span)

        var that = this
        div.onmouseover = function () {
          this.className = MARKER_CLASSNAME + ' hover'
          self.showModal()
          self.selectedDataIndex = index
          let pixel2 = map.pointToPixel(that._point)
          self.modal.left = pixel2.x
          self.modal.top = pixel2.y
        }

        div.onmouseout = function () {
          this.className = MARKER_CLASSNAME
          self.hideModal()
        }

        // div.onmousenter = function () {
        //   this.style.zIndex = 1000
        // }

        // div.onmouseleave = function () {
        //   window.alert(123)
        //   this.style.zIndex = 1
        // }

        // div.onclick = function () {
        //   self.selectedDataIndex = index
        //   let pixel2 = map.pointToPixel(that._point)
        //   self.modal.left = pixel2.x
        //   self.modal.top = pixel2.y
        //   self.showModal()
        // }
        self.markerNodes.push(div)
        mp.getPanes().labelPane.appendChild(div)

        return div
      }
      ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map
        var pixel = map.pointToOverlayPixel(this._point)
        let left = pixel.x - 17 + 'px'
        let top = pixel.y - 35 + 'px'
        this._div.style.left = left
        this._div.style.top = top
      }
      var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(marker.lng, marker.lat), text)
      mp.addOverlay(myCompOverlay)
    },

    killMap () {
      this.map = null
    },

    showModal () {
      window.clearTimeout(this.tid)
      this.modal.show = true
    },

    mouseenter () {
      this.showModal()
    },
    mouseleave () {
      this.hideModal()
    },

    hideModal () {
      this.tid = setTimeout(() => {
        this.modal.show = false
      }, 200)
    }
  }
}
</script>

<style lang="stylus">

  .x-map-root
    position relative
    width 100%
    height 100%

    .x-map
      width 100%
      height 100%

    .modal-box
      position absolute
      top 0
      left 0
      background #1e1e1e
      border-radius 10px
      transition all ease 0.2s
      box-sizing border-box
      padding 10px

      .title-box
        width 100%
        border-bottom 1px solid #424242
        box-sizing border-box
        padding-right 50px

        .title
          display block
          width 100%
          height 35px
          line-height 35px
          color #fff
          padding 0 10px
          font-size 14px
          color #CCCCCC
          box-sizing border-box

      .content-box
        padding 10px 10px
        box-sizing border-box
        .icon-box
          position relative
          float left
          width 60px
          height 100px

        .icon
          display block
          margin 0 auto
          width 25px
          height 40px
          background no-repeat url('../../../static/images/marker-online.png') center top / 25px auto
          &.offline
            background-image url('../../../static/images/marker-offline.png')
        .number
          position absolute
          top 2px
          left 1px
          display block
          margin 0 auto
          width 100%
          height 25px
          text-align center
        .content
          float left
          width 160px

          .part
            margin-bottom 10px
            font-size 14px
            font-weight 400
          .key
            color #999
          .value
            color #ccc

      .close-btn
        background:url('../../assets/images/u508.png') no-repeat center center
        position absolute
        right 18px
        top 18px
        width 15px
        height 15px
        line-height 20px

        .close
          display block
          width 100%
          height 100%
          margin 0 auto
          font-size 25px
          color #424242
          text-align center
          cursor pointer


  .map-marker
    width 34px
    height 34px
    background no-repeat url('../../../static/images/marker-online.png') top center / 34px auto
    text-align center
    box-sizing border-box
    padding 4px 1px
    .marker-text
      position relative
      left 1px
      top 1px
      margin-top 3px
      /*display block*/
      /*margin 0 auto*/
      color #fff
      text-align center
      font-size 12px
      padding 2px
    &.offline
      background-image url('../../../static/images/marker-offline.png')
      .marker-text
        /*background #707070*/
</style>
